<template>
  <div>
    <!--头部-->
    <Header @scrollTitle="scrollTitle" :chooseValue="4"></Header>
    <!--banner end-->
    <div class="jqgk" style="background:#FFF5E0">
      <div class="contai" style="max-width:1197px;">
        <div class="top_tit">
          <span class="titleFont" id="headline" v-if="pcshow">Celebrity Anecdote</span>
          <span
            class="titleFont"
            id="headline"
            style="font-size:36px"
            v-if="!pcshow"
            >Celebrity Anecdote</span
          >
          <div style="height:102px" v-if="pcshow"></div>
          <div style="height:30px" v-if="!pcshow"></div>
          <div style="text-align:left;">
            <div class="travel_con">
              <div class="tra_ul">
                <!-- 图片显示 -->
                <el-row style="margin-left:30px;margin-right:30px">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in dataList" :key="item.key">
                      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <div
                          @click="seeInfo(item)"
                          v-if="pcshow"
                          class="celebrityShowPicture"
                          :style="{ float: item.position }"
                        >
                          <img :src="item.url" alt="...." class="foodImgSize" />
                          <div class="foodFontSize">{{ item.title }}</div>
                        </div>
                        <!--  手机端 -->
                        <div
                          @click="seeInfo(item)"
                          v-if="!pcshow"
                          class="celebrityShowPicture"
                          :style="{ float: item.position }"
                        >
                          <img :src="item.url" alt="...." />
                          <div class="foodFontSize" style="font-size:20px">{{ item.title }}</div>
                        </div>
                      </el-col>
                    </div>
                  </a-spin>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./header";
import Footer from "./footer";
import { getCultureCelebrityList } from "../request/api";
export default {
  components: { Header, Footer },
  data() {
    return {
      choseValue: 1,
      pcshow: false,
      styletable: { background: "#F2DCCA" },
      mapStyle: { background: "#FFF5E0" },
      dataList: [],
      spinning: true,
      delayTime: 500
    };
  },
  beforeCreate() {},
  created() {
    if (this._isMobile()) {
      this.pcshow = false;
    } else {
      this.pcshow = true;
    }
  },

  mounted() {
    this.getCultureCelebrityListFunction();
  },

  methods: {
    //文化获取
    getCultureCelebrityListFunction() {
      getCultureCelebrityList(this.HOST)
        .then(response => {
          this.spinning = true;
          this.dataList = response.data.map(function(currentValue, index) {
            index % 2 == 0
              ? (currentValue.position = "left")
              : (currentValue.position = "right");
            return currentValue;
          });
          this.spinning = false;
        })
        .catch(error => {});
    },
    //判断是PC端还是手机端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    //菜单选择
    tabSelect(e) {
      let value = e.target.dataset.index;
      this.choseValue = value;
    },
    //查看详情
    seeInfo(infoid) {
      this.$router.push({
        path: "/celebrityInfomation",
        query: {
          id: infoid
        }
      });
    },
    //描点跳转
    scrollTitle() {
      var PageId = document.querySelector("#headline");
      window.scrollTo({
        top: PageId.offsetTop - 40,
        behavior: "smooth"
      });
    }
  }
};
</script>
<style>
.tra_tab {
  font-size: 28px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  display: inline-block;
  width: 193px;
  height: 67px;
  text-align: center;
  line-height: 67px;
  cursor: pointer;
}
.tra_tab_mobile {
  font-size: 14px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  padding: 10px;
}
.tra_tab_line_mobile {
  display: block;
  width: 100%;
  height: 2px;
  background: #840207;
  opacity: 0.1;
}
.tra_tab_line {
  display: block;
  width: 100%;
  height: 8px;
  background: #840207;
  opacity: 0.1;
}
.titleFont {
  font-size: 42px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #840207;
  line-height: 36px;
}
.foodImgSize {
  width: 542px;
  height: 359px;
}
.foodFontSize {
  font-size: 32px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  padding-top: 40px;
  padding-bottom: 55px;
}
.celebrityShowPicture {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
</style>
